<template>
    <div ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
    import {
        onMounted,
        ref
    } from 'vue'
    import * as echarts from 'echarts'

    const chart = ref(null)
    onMounted(() => {
        const myChart = echarts.init(chart.value)
        const option = {
            title: {
                text: '本日已收/未收'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 20
            },
            series: [{
                type: 'pie',
                data: [{
                        value: 50,
                        name: '已收'
                    },
                    {
                        value: 50,
                        name: '未收'
                    }
                ],
                radius: ['40%', '70%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }]
        }
        myChart.setOption(option)
    })
</script>